<template>
	<view>
		<input type="text" name="" id="" v-model="title">
		<button @click="sendFn">发布</button>
		<view class="">
			进行中 {{num}}
		</view>
		<view class="list">
			<todo-item v-for="item in arr" :title="item.title" :completed="item.completed" :key="item.id"
				@delClick="delFn(item.id)" @comChange="comChange(item)"></todo-item>
		</view>
	</view>
</template>
<script setup>
	import {ref,computed} from 'vue'
	let arr = ref([])
	let url = 'http://localhost:3000/todos'
	let title = ref("")
	let num = computed(() => {
		let n = arr.value.filter(v => v.completed == false).length
		return n
	})
	function sendFn() {
		uni.request({
			url: url,
			method: "POST",
			data: {
				title: title.value,
				completed: false
			},
			success() {
				loadList()
				title.value = ''
			}
		})
	}
	function loadList() {
		uni.request({
			url: url,
			method: 'GET',
			success(res) {
				console.log(res.data);
				arr.value = res.data
			}
		})
	}
	function delFn(id) {
		uni.request({
			url: url + '/' + id,
			method: 'DELETE',
			success() {
				loadList()
			}
		})
	}
	function comChange(item) {
		console.log(item);
		uni.request({
			url: url + '/' + item.id,
			method: 'PATCH',
			data: {
				completed: !item.completed
			},
			success() {
				loadList()
			}
		})
	}

	loadList()
</script>

<style>

</style>
